---
title: Deploy your Astro Site to Vercel
description: How to deploy your Astro site to the web on Vercel.
sidebar:
  label: Vercel
type: deploy
logo: vercel
supports: ['ssr', 'static']
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';

You can use [Vercel](http://vercel.com/) to deploy an Astro site to their global edge network with zero configuration.

This guide includes instructions for deploying to Vercel through the website UI or Vercel's CLI.

## Project configuration

Your Astro project can be deployed to Vercel as a static site, or a server-rendered site.

### Static site

Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Vercel. 

### Adapter for on-demand rendering

Add [the Vercel adapter](/en/guides/integrations-guide/vercel/) to enable [on-demand rendering](/en/guides/on-demand-rendering/) in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add vercel
  ```
  </Fragment>
</PackageManagerTabs>

<ReadMore>See the [Vercel adapter guide](/en/guides/integrations-guide/vercel/) to install manually instead, or for more configuration options, such as deploying your project’s Astro middleware using Vercel Edge Functions.</ReadMore>

## How to deploy

You can deploy to Vercel through the website UI or using Vercel’s CLI (command line interface). The process is the same for both static and on-demand rendered Astro sites.

### Website UI deployment

<Steps>
1. Push your code to your online Git repository (GitHub, GitLab, BitBucket).

2. [Import your project](https://vercel.com/new) into Vercel.

3. Vercel will automatically detect Astro and configure the right settings.

4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
</Steps>

After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).

<ReadMore>Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).</ReadMore>

### CLI deployment

<Steps>
1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn global add vercel
      vercel
      ```
      </Fragment>
    </PackageManagerTabs>

2. Vercel will automatically detect Astro and configure the right settings.

3. When asked `Want to override the settings? [y/N]`, choose `N`.

4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
</Steps>

### Project config with `vercel.json`

You can use `vercel.json` to override the default behavior of Vercel and to configure additional settings. For example, you may wish to attach headers to HTTP responses from your Deployments. 

<ReadMore>Learn more about [Vercel’s project configuration](https://vercel.com/docs/project-configuration).</ReadMore>
